import { useState } from 'react'
const DemoState = () => {
  // 第一个参数是想定义的变量名，
  // 第二个是set加变量名 通过第二个参数修改变量
  const [count, setCount] = useState(1)
  const [userinfo, setUserinfo] = useState({
    name: '李四',
    age: '20',
    tel: '18701373495'
  })
  // 修改引用类型
  const alterUserinfo = () => {
    setUserinfo(() => {
      return {
        ...userinfo,
        tel: '1111'
      }
    })
  }
  const alterCount = () => {
    // 第一种修改useState方法
    // setCount(count+1)
    // 第二种修改的方法 箭头函数类型
    setCount(() => {
      // 可以写逻辑代码
      if (count < 5) {
        return count + 1
      }
      return count + 4
    })
  }
  return (<>
    <h2>usestate()保存状态</h2>
    <p>普通类型：总数{count}</p>
    <button onClick={alterCount}>修改总数count</button>
    <p>引用类型 对象格式userinfo</p>
    <p>姓名：{userinfo.name}</p>
    <p>年龄：{userinfo.age}</p>
    <p>手机号：{userinfo.tel}</p>
    <button onClick={alterUserinfo}>修改userinfo引用类型姓名</button>
  </>);
}

export default DemoState;
